<template>
  <view class="report">
    <!-- #ifndef MP-TOUTIAO -->
    <SingleHeader :pageTitle="$t('videoGoods.report.title')"></SingleHeader>
    <!-- #endif -->

    <view class="subTitle">
      <view class="let">{{ $t("videoGoods.report.subTit") }}</view>
    </view>

    <view class="reportSelect">
      <radio-group @change="radioChange">
        <label
          class="uni-list-cell uni-list-cell-pd"
          v-for="(item, index) in items"
          :key="item.id"
        >
          <view class="title">{{ item.title }}</view>
          <view>
            <radio
              style="transform: scale(0.6)"
              color="#F0250E"
              :value="item.id"
              :checked="index === current"
            />
          </view>
        </label>
      </radio-group>
    </view>

    <view class="subTitle">
      <view class="let">{{ $t("videoGoods.report.des") }}</view>
      <view class="rig"> {{ desc.length }}/3000 </view>
    </view>

    <view class="inp border-none">
      <textarea
        v-model="desc"
        :maxlength="3000"
        :placeholder="$t('videoGoods.report.placeholder')"
      />
    </view>

    <view class="submit safe-area-inset-bottom" @click="submit">
      <view class="m-btn"> {{ $t("videoGoods.report.report") }} </view>
    </view>

    <transitionPage></transitionPage>
  </view>
</template>

<script>
import videoClassify from "@/api/videoClassify";
import singleHeader from "@/components/diySystemPage/components/singleHeader/index.vue";

export default {
  components: {
    singleHeader,
  },

  data() {
    return {
      id: undefined,
      items: [
        { id: "0", title: this.$t("videoGoods.report.reportingReasons.0") },
        { id: "1", title: this.$t("videoGoods.report.reportingReasons.1") },
        { id: "2", title: this.$t("videoGoods.report.reportingReasons.2") },
        { id: "3", title: this.$t("videoGoods.report.reportingReasons.3") },
        { id: "4", title: this.$t("videoGoods.report.reportingReasons.4") },
        { id: "5", title: this.$t("videoGoods.report.reportingReasons.5") },
        { id: "6", title: this.$t("videoGoods.report.reportingReasons.6") },
      ],

      desc: "",
      current: 0,
    };
  },

  onLoad(opi) {
    this.$utils.hideShareMenu();
    this.id = opi.id;
  },

  methods: {
    radioChange: function (evt) {
      for (let i = 0; i < this.items.length; i++) {
        if (this.items[i].id === evt.detail.value) {
          this.current = i;
          break;
        }
      }
    },

    // 提交表单
    submit() {
      let { id: vl_id, desc, current } = this;

      uni.showLoading({
        title: this.$t("home.loading"),
      });

      videoClassify
        .videoGoodsReport({
          vl_id,
          desc,
          type: String(current),
        })
        .then((res) => {
          uni.hideLoading();
          if (res.code === 0) {
            this.$utils.showModal("提示", "举报成功！", false, () => {
              uni.navigateBack({
                delta: 1,
              });
            });
          }
        })
        .catch(() => {
          uni.hideLoading();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.report {
  padding: 0 30rpx env(safe-area-inset-bottom);
}

.m-btn {
  height: 80rpx;
  background: #f0250e;
  border-radius: 32px;
  text-align: center;
  color: #fff;
  font-size: 32rpx;
  line-height: 80rpx;
}

.submit {
  position: fixed;
  left: 30rpx;
  right: 30rpx;
  bottom: 0;
}

.uni-list-cell-pd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26rpx 0;
  border-bottom: 1px solid #f2f2f2;

  .title {
    flex: 1;
    overflow: hidden;
    color: #262626;
  }
}

.subTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 24rpx;
  color: #8c8c8c;
}

.reportSelect {
  padding: 20rpx 0 72rpx;
}

.inp {
  padding: 32rpx 0;

  textarea {
    font-size: 34rpx;
    width: 100%;
    height: 200rpx;
  }
}
</style>
